<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>bootstrap.table.js</title>

    <!-- 前置依赖 -->
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css"/>
    <script type="text/javascript" src="../lib/jquery/jquery-2.0.3.min.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap-4.0.0-dist/css/bootstrap.min.css"/>
    <script type="text/javascript" src="../lib/bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"></script>

    <!-- bootstrap.table.js -->
    <link rel="stylesheet" href="../css/bootstrap.table.css"/>
    <script type="text/javascript" src="../js/bootstrap.table.js"></script>

    <script type="text/javascript">
        $(function () {
            var conf = {
                caption: '用户信息',
                columns: [
                    {
                        field: 'id',
                        caption: 'ID',
                        editable: false,
                        width: 100
                    },
                    {
                        field: 'name',
                        caption: '姓名',
                        editable: true
                    },
                    {
                        field: 'birth',
                        caption: '出生日期',
                        type: 'time',
                        editable: false
                    },
                    {
                        field: 'github',
                        caption: 'Github',
                        type: 'link',
                        editable: true
                    }
                ],
                fadeToggle: true,

                // 删除操作的后台配置
//                removeUrl: "/bootstrap/table/delete",
//                removeExtra: { field: 'id' },              // 删除时, 向后台传入 JSON 串, 如 {"id": 1}
                updateUrl: "/bootstrap/table/update"
            };

            var data = [{
                "id": 0,
                "name": '救赎',
                'birth': '1996-06-06',
                'github': 'https://github.com/bascker/bootstrap.table.js'
            }, {
                "id": 1,
                "name": '贪狼',
                'birth': '1998-08-08',
                'github': 'https://github.com/bascker/bootstrap.table.js'
            }];

            $('#table').table(conf, data);
        });
    </script>
</head>
<body>
<table id="table"></table>
</body>
</html>